import React, { useEffect, useRef, useState } from 'react';
import { Tag, Card, Space, Popover, Form, Button, Dropdown } from 'antd';
import { connect, history } from 'umi';
import { PlusCircleOutlined, EllipsisOutlined } from '@ant-design/icons'
import FormCondition from '@/components/FormCondition';
const TreeSetting = (props) => {
  const { data, handleCallback, loading, activeTabKey, reload, dispatch, editVisible = {}, setEditVisible, visible = {}, setVisible } = props
  const { id, categoryName } = data
  const { location } = history
  const { pathname } = location
  useEffect(() => {
    setEditVisible(false)
    setVisible(false)
  }, [pathname])
  const TreeSettingFrom = (props) => {
    const { setVisible, visible = {} } = props
    const { show = false, type = 'install' } = visible
    const [form] = Form.useForm();
    const formItems = [
      {
        label: '类别',
        name: 'categoryName',
      },
      {
        label: '能否分享',
        name: 'shareFlag',
        type: 'select',
        select: {
          0: '否',
          1: '是'
        }
      },
      {
        label: '能否下载',
        name: 'downloadFlag',
        type: 'select',
        select: {
          0: '否',
          1: '是'
        }
      },
    ];
    return <Space style={{ width: 360, position: 'relative', zIndex: 1002 }} onClick={(e) => {
      e.stopPropagation()
    }} direction='vertical'>
      <FormCondition form={form} formItems={formItems} initialValues={type === 'install' ? {} : data}></FormCondition>
      <Space align='end' style={{ width: '100%', display: 'flex', justifyContent: 'flex-end' }}>
        <Button onClick={(e) => {
          e.stopPropagation()
          setVisible({ ['show' + id]: false })
          setEditVisible({ ['show' + id]: false })
        }}>取消</Button>
        <Button loading={loading} onClick={(e) => {
          e.stopPropagation()
          form.validateFields().then((values) => {
            const payload = type === 'install' ? {
              ...values,
              parentId: id ? id : 0,
              categoryType: activeTabKey
            } : {
              ...values,
              id: id,
              categoryType: activeTabKey
            }
            dispatch({
              type: 'liveStreaming/fakeHandleCategory',
              payload: payload,
              callback: () => {
                setVisible({ ['show' + id]: false })
                setEditVisible({ ['show' + id]: false })
                reload();
                handleCallback()
              },
            });
          });

        }} type='primary'>确定</Button>
      </Space>
    </Space>
  }
  const items = [
    {
      key: '1',
      label: (
        <Button onClick={(e) => {
          e.stopPropagation();
          setVisible({ ['show' + id]: false })
          setEditVisible({ type: 'edit', ['show' + id]: true })
        }} type='link'>修改</Button>
      ),
    },
    {
      key: '2',
      // label: '删除',
      // click: () => {
      //   setVisible(false)
      //   dispatch({
      //     type: 'liveStreaming/fakeDeleteMaterialCategory',
      //     payload: { id: id },
      //     callback: (e) => {
      //       reload()
      //     },
      //   });
      // },
      label: (
        <Button type='link' onClick={(e) => {
          e.stopPropagation();
          setVisible(false)
          dispatch({
            type: 'liveStreaming/fakeDeleteMaterialCategory',
            payload: { id: id },
            callback: (e) => {
              reload()
            },
          });
        }}>删除</Button>
      ),
    },
  ];
  const itemsClick = {
    1: () => {
      console.log(123213)
      setVisible({ ['show' + id]: false })
      setEditVisible({ type: 'edit', ['show' + id]: true })
      console.log(666)
    },
    2: () => {
      setVisible(false)
      dispatch({
        type: 'liveStreaming/fakeDeleteMaterialCategory',
        payload: { id: id },
        callback: (e) => {
          reload()
        },
      });
    }
  }
  return (
    <Space>
      <Popover trigger='click' placement="bottom" content={<TreeSettingFrom visible={visible} setVisible={setVisible}></TreeSettingFrom>} open={visible['show' + id]}>
        <PlusCircleOutlined onClick={(e) => {
          e.stopPropagation()
          setEditVisible(false)
          setVisible({ type: 'install', ['show' + id]: true })
        }}></PlusCircleOutlined>
      </Popover>
      {id && <Dropdown
        trigger='click'
        menu={{
          items,
          // onClick: (e) => {
          //   const { key } = e
          //   itemsClick[key]()
          // }
        }}
        placement="bottom"
      >
        <EllipsisOutlined onClick={(e) => {
          e.stopPropagation()
          setVisible(false)
        }}></EllipsisOutlined>
      </Dropdown>
      }
      <Popover getPopupContainer={null} trigger='click' placement="bottom" content={<TreeSettingFrom visible={editVisible} setVisible={setEditVisible}></TreeSettingFrom>} open={editVisible['show' + id]}>
      </Popover>
    </Space>
  )
}
export default connect(({ loading }) => ({
  loading: loading.effects['liveStreaming/fakeHandleCategory'],
}))(TreeSetting); 